<template>
	<view class="root">
		<view class="header">
			<view class="user-info" v-if="token">
				<view class="avatar">
					<image src="https://pic.52112.com/2019/06/06/JPS-190606_155/24poJOgl7m_small.jpg" 
						mode=""></image>
				</view>
				<view class="text">
				
					<view class="nickname">
						wukuwull
					</view>
					<view class="greeting">
						尊敬的用户您好
					</view>
				</view>
				<view class="blank">
				</view>
			</view>
			<view class="no-login" v-else @click="toLoginPage">
				<view class="text">未登录</view>
				<uni-icons cclass="icon" type="right" size="30"></uni-icons>
			</view>
		</view>
		
		<view class="body">
			<view class="order">
				<view class="top">
					<view class="left">
						我的订单
					</view>
					<view class="right">
						<view class="text">
							查看订单
						</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="bottom">
					<view class="icon-container">
						<uni-icons type="color" size="30" color="#2ec076"></uni-icons>
					</view>
					<view class="wait-order">
						0个待接单
					</view>
					<view class="ongoing">
						0个进行中
					</view>
					<view class="wait-comment">
						0个待评价
					</view>
				</view>
			</view>
			<view class="function-area">
				<!-- 功能服务 -->
				<view class="function-container">
					<view class="function-name">
						功能服务
					</view>
					<view class="function-list">
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="location" size="30"></uni-icons>
							</view>
							<view class="text">
								我的地址
							</view>
						</view>
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="headphones" size="30"></uni-icons>
							</view>
							<view class="text">
								联系客服
							</view>
						</view>
						
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="wallet" size="30"></uni-icons>
							</view>
							<view class="text">
								收款方式
							</view>
						</view>
						
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="notification" size="30"></uni-icons>
							</view>
							<view class="text">
								常见问题
							</view>
						</view>
						
					</view>
					
				</view>
				
				<!-- 联系我们 -->
				<view class="function-container">
					<view class="function-name">
						联系我们
					</view>
					<view class="function-list">
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="personadd" size="30"></uni-icons>
							</view>
							<view class="text">
								招聘回收员
							</view>
						</view>
						
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="person" size="30"></uni-icons>
							</view>
							<view class="text">
								我是回收员
							</view>
						</view>
						
						
						
						<view class="function-item">
							<view class="icon-container">
								<uni-icons type="phone" size="30"></uni-icons>
							</view>
							<view class="text">
								商务合作
							</view>
						</view>
						
						
						
					</view>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onShow, onHide} from '@dcloudio/uni-app'
	import { ref } from 'vue';
	
	const token = ref(null)
	
	function toLoginPage() {
		uni.navigateTo({
			url:'/pages/no-tabBar/login/login'
		})
	}
	
	onShow(() => {
		token.value = uni.getStorageSync('token')
	})
	onHide(() => {
		token.value = null
	})
	

</script>

<style lang="scss" scoped>

	.root {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 86vh;
		.header {
			height: 12vh;
			.user-info {
				background-color: #f0f0f0;
				height: 100%;
				display: grid;
				padding-left: 20rpx;
				grid-template-columns: 80rpx 250rpx 1fr;
				justify-content: center;
				align-items: center;
				
				grid-gap: 40rpx;
				.avatar {
					width: 100rpx;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					image {
						border-radius: inherit;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				
				.text {
					// overflow: hidden;
					// text-overflow: ellipsis;
					// text-wrap: nowrap;
					display: flex;
					flex-direction: column;
					line-height: 48rpx;
					width: 100%;
					
				}
			}
			
			.no-login {
				background-color: #eff3f5;
				padding: 0 50rpx;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 40rpx;
				.text {
					width: 600rpx;
					text-align: center;
				}
				.icon {
					
				}
			}
		}
		.body {
			height: 74vh;
			background-color: white;
			
			.order {
				display: flex;
				flex-direction: column;
				height: 13vh;
				.top {
					padding-left: 20rpx;
					padding-right: 50rpx;
					font-weight: 700;
					line-height: 100rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					
					.left {
						
					}
					.right {
						display: flex;
						font-size: 30rpx;
					}
					
				}
				.bottom {
					position: relative;
					display: grid;
					grid-template-columns: 100rpx repeat(3, 1fr);
					padding-left: 30rpx;
					height: 6vh;
					align-items: center;
					&::after {
						position: absolute;
						bottom: 0;
						left: 3%;
						display: block;
						content: ' ';
						background-color: #dadada;
						width: 92vw;
						height: 2px;
					}
					&>view {
						position: relative;
					}
					&>view::after {
						position: absolute;
						right: 20%;
						top: 10%;
						display: block;
						content: '';
						height: 50rpx;
						background-color: #dadada;
						width: 2px;
					}
				}
				
				
				
			}
			
			.function-area {
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 18rpx;
				align-items: center;
				.function-container {
					
					height: 200rpx;
					width: 94%;
					display: flex;
					flex-direction: column;
					border: 5rpx solid #dadada;
					border-radius: 30rpx;
					padding-left: 15rpx;
					padding-right: 15rpx;
					.function-name {
						font-weight: 700;
						font-size: 36rpx;
						line-height: 80rpx;
					}
					.function-list {
						display: grid;
						grid-template-columns: repeat(4, 1fr);
						justify-content: center;
						align-items: center;
						font-size: 32rpx;
						grid-gap: 10rpx;
						.function-item {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
						}
					}
					
				}
				
				& .function-container:nth-child(2) {
					.function-list {
						padding-left: 15rpx;
						padding-right: 15rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
				
				
			}
			
		}
	}
	
	
</style>
